<template>
  <a-modal v-model:visible="showhidden" cancel-text="取消" ok-text="确认" :title="props.statealert + '页面'" @ok="handleOk" @cancel="handcancel">
    <a-form ref="Formsya" :model="databaseall" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 20 }">
      <a-form-item label="数据库类型" name="baseType">
        <a-input v-model:value="databaseall.baseType" :disabled="true" placeholder="Mysql" />
      </a-form-item>
      <a-form-item label="数据源名称" name="baseName">
        <a-input v-model:value="databaseall.baseName" />
      </a-form-item>
      <a-form-item label="数据源描述" name="baseMsg">
        <a-input v-model:value="databaseall.baseMsg" />
      </a-form-item>
      <a-form-item label="JDBC URL" name="baseUrls">
        <a-input v-model:value="databaseall.baseUrls" />
      </a-form-item>
      <a-form-item label="驱动类名" name="baseDriver">
        <a-input v-model:value="databaseall.baseDriver" />
      </a-form-item>
      <a-form-item label="用户名" name="baseUser">
        <a-input v-model:value="databaseall.baseUser" />
      </a-form-item>
      <a-form-item label="密码" name="basePsw">
        <a-input v-model:value="databaseall.basePsw" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { updateDatabase, addDatabase } from '@/api/apihook/api';
  import { message } from 'ant-design-vue';
  const props = defineProps({
    visible: {
      type: Boolean,
    },
    database: {
      type: Array,
      default: () => {
        return [];
      },
    },
    statealert: {
      type: String,
    },
  });
  const emit = defineEmits(['sendflse']);
  interface Datavalue {
    baseName: string;
    baseType: string;
    baseMsg: string;
    baseUrls: string;
    baseDriver: string;
    baseUser: string;
    basePsw: string;
    baseId?: number;
  }
  let databaseall = ref<Datavalue>({
    baseName: '',
    baseType: 'Mysql',
    baseUrls: '',
    baseDriver: '',
    baseMsg: '',
    baseUser: '',
    basePsw: '',
  });
  const zhengzhe = '^jdbc:mysql://[0-9]{1,3}[.][0-9]{1,3}[.][0-9]{1,3}[.][0-9]{1,3}:[0-9]{1,5}[/][a-zA-Z-z0-9_]{1,63}';

  // 验证
  const rules: any = {
    baseType: [{ required: true, message: '数据库名称不能为空', trigger: ['blur', 'change'] }],
    baseName: [{ required: true, message: '数据源名称不能为空', trigger: ['blur', 'change'] }],
    baseUrls: [
      { required: true, message: 'JDBC URL不能为空', trigger: ['blur', 'change'] },
      {
        pattern: /^\S*$/,
        message: '不能包含空格',
        trigger: ['blur', 'change'],
      },
      {
        pattern: zhengzhe,
        message: '格式错误',
        trigger: ['blur', 'change'],
      },
    ],
    baseDriver: [{ required: true, message: '驱动类名不能为空', trigger: ['blur', 'change'] }],
    baseUser: [{ required: true, message: '用户名不能为空', trigger: ['blur', 'change'] }],
    basePsw: [{ required: true, message: '密码不能为空', trigger: ['blur', 'change'] }],
  };
  // 对话框显示隐藏
  let showhidden = ref<boolean>(false);
  watch(
    () => props.visible,
    newvalue => {
      showhidden.value = newvalue;
      databaseall.value = props.database;
      if (props.statealert == '新增') {
        Object.keys(databaseall.value).forEach(key => {
          databaseall.value[key] = '';
        });
        databaseall.value.baseType = 'MYsql';
      }
    },
    { immediate: true },
  );
  //  提交编辑和新增
  const Formsya = ref();
  const handleOk = async () => {
    const result1 = await Formsya.value.validate();
    console.log(result1);
    if (props.statealert == '新增') {
      databaseall.value.baseUrls = databaseall.value.baseUrls;
      let res = await addDatabase(databaseall.value);
      console.log(res.data);
      if (res.data.code == 100200) {
        showhidden.value = false;
        Formsya.value.clearValidate(); //清除校验
        emit('sendflse', showhidden.value);
        message.success('新增成功');
      } else {
        message.error('新增失败');
      }
    }
    if (props.statealert == '编辑') {
      let res = await updateDatabase(databaseall.value);
      if (res.data.code == 100200) {
        showhidden.value = false;
        Formsya.value.clearValidate(); //清除校验
        emit('sendflse', showhidden.value);
        message.success('编辑成功');
      } else {
        message.error('编辑失败');
      }
    }
    // Formsya.value.clearValidate(); //清除校验
    // emit('sendflse', showhidden.value);
  };
  // 取消按钮
  const handcancel = () => {
    showhidden.value = false;
    Formsya.value.clearValidate(); //清除校验
    emit('sendflse', showhidden.value);
  };
</script>

<style></style>
